<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>个人中心</title>
  <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
  <!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.1.1/jquery.min.js"></script>-->
  <script src="asserts/js/jquery-2.1.1.min.js"></script>
  <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.js"></script>
  <!--线上 validator 校验 js 文件-->
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/bootstrapValidator.js"></script>
  <!--线上支持中文校验 js 文件-->
  <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-validator/0.5.3/js/language/zh_CN.js"></script>
  <!--  线上vue.js文件 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 3. 引入ElementUI组件 -->
  <script src="https://cdn.bootcss.com/element-ui/2.8.2/index.js"></script>
<!--  <script src="asserts/js/index.js"></script>-->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!--  <link rel="stylesheet" href="asserts/css/index.css">-->
</head>
<style>
  .navbar-inverse{
    height: 35px;
    font-size: 6px;
  }
  #a2{
    padding-top: 7px;
    margin-top: 0px;
    padding-right:0px;
    color: #eb9e9b
  }
  #a2:hover{
    color: #eb565f;
  }
  #div1{
    /*border: red solid 1px;*/
    height: 80px;
    width: 910px;
    margin-left: 192px;
    margin-top: 10px;
  }
  #div2{
    overflow: hidden;
    /*border: red solid 1px;*/
    float: left;
    height: 80px;
    width: 150px
  }
  #div3{
    /*border: red solid 1px;*/
    float: left;
    margin-left: 20px;
    font-size: 18px;
    height: 80px;
    width: 350px;
    font-weight:500;
    color: #4a4a4a;
    padding-top: 25px;
    font-family:微软雅黑;
  }
  .span1{
    /* 鼠标移入变小手 */
    cursor: pointer;

  }
  .span1:hover{
    font-weight: bold;
  }
  .form-group{
    /*border: red solid 1px;*/
    height: 80px;
    width: 300px;
    padding-top: 22px;
    float: right;
    color: #FFFFFF;

  }
  #button_id{
    float: right;
    width: 70px;
    height: 34px;
    background-color: #ff6e39;
    border: 0px;
    border-radius: 4px;
    box-shadow: 0px 0px 5px #888888;
  }


  #content_body{
    background:#f5f5f5;
  }

  /*个人中心页面的样式*/
  #content_div{
    width: 70%;
    height: 700px;
    margin: 0 auto;
    /*border: 1px solid red;*/
  }

  #div_left{
    float: left;
    width: 20%;
    /*border: 1px solid greenyellow;*/
    height: 600px;
    padding-left:40px;
    background:#FFF
  }

  #div_right{
    float: left;
    width: 70%;
    /*border: 1px solid blue;*/
    height: 600px;
    margin-left: 30px;
    background:#FFF;
    margin-top: -15px;
    /*overflow: scroll;*/
  }

  .left_font{
    line-height:45px;
    font-size:16px;
    cursor: pointer;
    text-decoration: none;
  }
</style>
<body>
<nav class=" navbar-inverse">
  <div class="container-fluid" >
    <!-- Brand and toggle get grouped for better mobile display -->
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class=""><a href="#" style="padding-top: 0px;margin-top: 7px;margin-left: 150px">淘贝首页</a></li>
        <li><a href="#" style="padding-top: 0px;margin-top: 7px">问题反馈</a></li>
        <li><a href="#" style="padding-top: 0px;margin-top: 7px">卖家中心</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown"   style="padding-top: 7px;margin-top: 0px;height: 35px;">商品分类 <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">数码电子</a></li>
            <li><a href="#">食品</a></li>
            <li><a href="#">生活用品</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">服装 | 男装 | 女装</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">厨具用品</a></li>
          </ul>
        </li>
      </ul>
      <!--  <form class="navbar-form navbar-left">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Submit</button>
        </form>-->
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"  id="a2">亲，请登录</a></li>
        <li><a href="#" style="padding-top: 7px;margin-top: 0px;">注册</a></li>
        <li><a href="#"  style="padding-top: 7px;margin-top: 0px;height: 35px;margin-right: 150px">购物车<span style="color: #eb9e9b">0</span></a>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>
<div id="div1">
  <div id="div2">
    <img src="asscerts/img/淘贝logo.png" style="height: 250px;margin-top: -85px;margin-left: -30px">
  </div>
  <div id="div3">
    <span class="span1">数码电子</span>
    <span style="margin-left: 10px" class="span1">生活用品</span>
    <span style="margin-left: 10px" class="span1">服装饰品</span>
    <span style="margin-left: 10px" class="span1">厨具用品</span>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" style="width: 220px;float: left" placeholder="幸福生活，搜索一下" name="username" id="username">
    <input id="button_id" type="button" value="搜索" style="">
  </div>
</div>

<div id="content_body">
  <div id="content_div">
    <div id="div_left">
      <a class="left_font" href="">我的订单</a><br/>
      <a class="left_font" href="">收货地址</a><br/>
      <a class="left_font">个人信息</a><br/>
      <a class="left_font">优惠券</a><br/>
      <a class="left_font">评价晒单</a><br/>
      <a class="left_font">消息通知</a><br/>
    </div>
    <div id="div_right">
      <div style="height: 300px;overflow: scroll">
        <el-table
                v-loading="loading"
                :data="address"
                style="width: 100%"
        >
          <el-table-column
                  type="index"
                  width="50"
                  label="序号"
                  align="center"
          >
          </el-table-column>
          <el-table-column
                  prop="name"
                  label="收货人"
                  width="100"
                  align="center"
          >
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="收货地址"
                  width="240"
                  align="center"
          >
          </el-table-column>
          <el-table-column
                prop="tel"
                label="电话"
                width="120"
                align="center"
          >
        </el-table-column>
        <el-table-column
                label="操作"
                align="center"
        >
          <template slot-scope="scope">
            <el-button @click="delAddr(scope.row)" icon="el-icon-delete" type="danger" size="mini">删 除</el-button>
            <el-button @click="showAddr(scope.row)" icon="el-icon-edit" size="mini">编 辑</el-button>
            <el-button v-if="scope.row.flag == 0" icon="el-icon-star-on" size="mini">默认地址</el-button>
            <el-button @click="setDefault(scope.row)" v-else icon="el-icon-star-off" size="mini">设为默认</el-button>
          </template>
        </el-table-column>
        </el-table>
      </div>
      <div>
        <form class="form-horizontal">
          <label for="name">收货人</label>
          <input id="name" name="name" placeholder="请输入收货人"/><br/>
          <label for="tel">手机号</label>
          <input id="tel" name="tel" placeholder="请输入手机号"/><br/>
          <label for="address">地址</label>
          <textarea id="address" class="form-control" style="resize: none" placeholder="请输入收货地址" rows="3" ></textarea>
        </form>
        <el-button id="addAddrBtn" @click="addAddress" class="btn btn-success">添加</el-button>
      </div>
    </div>
  </div>

  <el-dialog
          title="修改收货地址"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose">
    <el-form ref="form" :model="address" label-width="80px"
              :rules="formRule"
    >
      <el-form-item label="收货人" prop="name">
        <el-input v-model="address.name"></el-input>
      </el-form-item>
      <el-form-item label="电话" prop="tel">
        <el-input v-model="address.tel"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="address.address"></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="updateAddr">修 改</el-button>
  </span>
  </el-dialog>

</div>
<script type="text/javascript">
  const vm = new Vue({
      el: '#content_body',
      data: {
          address: [],
          info: '',
          loading: false,
          dialogVisible: false,
          address: {},
          formRule: {
              name: [{required: true, message: '请输入收货人姓名', trigger: 'blur'}],
              tel: [{required: true, message: '请输入电话', trigger: 'blur'}],
              address: [{required: true, message: '请输入地址', trigger: 'blur'}]
          }
      },
      methods: {
          addAddress() {
              let self = this;
              $.ajax({
                  url: '/taobei_web/address/addAddr',
                  type: 'post',
                  data: {
                      name: $("#name").val(),
                      tel: $("#tel").val(),
                      address: $("#address").val()
                  },
                  dataType: 'json',
                  success(data) {
                      self.$message({
                          message: data.msg,
                          type: 'success'
                      });
                      if (data.status == 200) {
                          //添加成功，需要刷新收货地址列表
                          debugger;
                          self.initAddress()
                      }
                  }
              })
          },
          initAddress() {
              this.loading = true
              let self = this;
              $.ajax({
                  url: '/taobei_web/address/getAllAddr',
                  type: 'get',
                  dataType: 'json',
                  success(data) {
                      self.address = data.data
                  }
              })
              this.loading = false
          },
          delAddr(item) {
            this.loading = false
            let self = this;
            $.ajax({
                url: '/taobei_web/address/delAddr',
                type: 'post',
                data: {
                  id: item.id
                },
                dataType: 'json',
                success(data) {
                  self.$message({
                      message: data.msg,
                      type: 'success'
                  });
                  if (data.status == 200){
                      self.initAddress()
                  }
                }
            })
            this.loading = true
          },
          setDefault(item) {
              //设置默认收货地址
              let self = this
              $.ajax({
                  url: '/taobei_web/address/updateAddrDef',
                  type: 'post',
                  dataType: 'json',
                  data: {
                      id: item.id
                  },
                  success(data) {
                      self.$message({
                          message: data.msg,
                          type: 'success'
                      });
                      if (data.status == 200){
                          self.initAddress()
                      }
                  }
              })
          },
          showAddr(item){
              this.address = item
              this.dialogVisible = true
          },
          updateAddr() {
              let self = this;
              $.ajax({
                  url: '/taobei_web/address/updateAddr',
                  type: 'post',
                  dataType: 'json',
                  data: self.address,
                  success(data) {
                      self.$message({
                          message: data.msg,
                          type: 'success'
                      });
                      if (data.status == 200){
                          self.initAddress()
                      }
                      self.dialogVisible = false
                  }
              })
          }
      },
      mounted() {
          this.initAddress();
      }
  })


</script>
</body>
</html>